<template>
  <div class="home">
    <h2>获取state中的数据</h2>
    <!-- 1.差值表达式获取数据 -->
    <p>{{ $store.state.num }}</p>
    <!-- 2.使用计算属性获取数据 -->
    <p>{{ num }}</p>
    <p>
      <button @click="changeNum">修改state的num++</button>
      <button @click="changeNumArg(5)">修改state的num+5</button>
    </p>
    <!-- 异步操作修改 -->
    <p>
      <button @click="actChange">actions修改state的num++</button>
      <button @click="actChangeArg(10)">acitons修改state的num+10</button>
    </p>
    <!-- 1.getter使用插值 -->
    <p>{{ $store.getters.gettersNum }}</p>
    <!-- 2.计算属性获取 -->
    {{ gettersNum }}
  </div>
</template>

<script>
// @ is an alias to /src
// 1.先导入辅助函数
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  name: "HomeView",
  components: {},
  mounted() {
    console.log(this);
    console.log(this.$store);
  },
  computed: {
    // num() {
    //   return this.$store.state.num;
    // },
    // 3.使用辅助函数来获取数据
    // 扩展运算符
    ...mapState(["num"]),
    // gettersNum() {
    //   return this.$store.getters.gettersNum;
    // },
    ...mapGetters(["gettersNum"]),
  },
  methods: {
    // 1.通过方法提交mutations
    // this.$store.commit(mutations名称, 携带的参数);
    // changeNum() {
    //   // 通过commit提交mutations然后达到修改state中数据的结果
    //   this.$store.commit("changeNum");
    // },
    // 2.提交的同时,携带参数
    // changeNumArg(data) {
    //   this.$store.commit("changeNumArg", data);
    // },
    // 3.使用辅助函数来提交mutations
    ...mapMutations(["changeNum", "changeNumArg"]),
    // actions修改dispatch(派发)
    // actChange() {
    //   this.$store.dispatch("actChange");
    // },
    // actChangeArg(data) {
    //   this.$store.dispatch("actChangeArg", data);
    // },
    // 辅助函数来派发actions
    ...mapActions(["actChange", "actChangeArg"]),
  },
};
</script>
